<template>
  <el-card class="recent-logs-card">
    <template #header>
      <div class="card-header">
        <span>最近活动</span>
        <el-button type="primary" size="small" @click="goToAuditLogs">
          查看全部
        </el-button>
      </div>
    </template>
    
    <div v-loading="loading" class="logs-list">
      <div v-if="logs.length === 0 && !loading" class="empty-state">
        <el-empty description="暂无活动记录" />
      </div>
      
      <div v-else class="log-item" v-for="log in logs" :key="log.id">
        <div class="log-icon">
          <el-icon :color="getActionTypeColor(log.actionType)">
            <component :is="getActionTypeIcon(log.actionType)" />
          </el-icon>
        </div>
        
        <div class="log-content">
          <div class="log-description">{{ log.description }}</div>
          <div class="log-meta">
            <span class="log-user">{{ log.userName }}</span>
            <span class="log-time">{{ formatTime(log.actionTime) }}</span>
            <el-tag :type="log.result === '成功' ? 'success' : 'danger'" size="small">
              {{ log.result }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { getRecentLogs, type AuditLogDto } from '@/api/auditLog'
import { 
  User, 
  Plus, 
  Edit, 
  Delete, 
  Upload, 
  Download, 
  Key,
  SwitchButton as LoginIcon,
  SwitchButton as LogoutIcon
} from '@element-plus/icons-vue'

const router = useRouter()
const loading = ref(false)
const logs = ref<AuditLogDto[]>([])

const loadRecentLogs = async () => {
  loading.value = true
  try {
    const userStore = useUserStore()
    const userId = userStore.userInfo?.id || 0
    const response = await getRecentLogs(userId, 5)
    if (response.code === 200) {
      logs.value = response.data || []
    }
  } catch (error) {
    console.error('加载最近日志失败:', error)
  } finally {
    loading.value = false
  }
}

const goToAuditLogs = () => {
  router.push('/audit-logs')
}

const getActionTypeIcon = (actionType: string) => {
  const iconMap: Record<string, any> = {
    '登录': LoginIcon,
    '登出': LogoutIcon,
    '创建': Plus,
    '更新': Edit,
    '删除': Delete,
    '添加': Plus,
    '修改': Edit,
    '重置密码': Key,
    '上传': Upload,
    '下载': Download
  }
  return iconMap[actionType] || User
}

const getActionTypeColor = (actionType: string) => {
  const colorMap: Record<string, string> = {
    '登录': '#67C23A',
    '登出': '#909399',
    '创建': '#409EFF',
    '更新': '#E6A23C',
    '删除': '#F56C6C',
    '添加': '#67C23A',
    '修改': '#E6A23C',
    '重置密码': '#F56C6C',
    '上传': '#909399',
    '下载': '#909399'
  }
  return colorMap[actionType] || '#909399'
}

const formatTime = (dateTime: string) => {
  const now = new Date()
  const logTime = new Date(dateTime)
  const diff = now.getTime() - logTime.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 1) {
    return '刚刚'
  } else if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return logTime.toLocaleDateString('zh-CN')
  }
}

onMounted(() => {
  loadRecentLogs()
})
</script>

<style scoped>
.recent-logs-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logs-list {
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 20px;
}

.log-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.log-item:last-child {
  border-bottom: none;
}

.log-icon {
  margin-right: 12px;
  margin-top: 2px;
}

.log-content {
  flex: 1;
  min-width: 0;
}

.log-description {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
  word-break: break-all;
}

.log-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.log-user {
  font-weight: 500;
}

.log-time {
  color: #C0C4CC;
}
</style>
